<template>
<!-- 唯品快抢 -->
    <div class="lightProduct">
         <!-- 顶部导航开始 -->
        <div class="subscribe-title">
            <!-- <div class="s-title-subscribe">
                <img src="https://h2.appsimg.com/b.appsimg.com/upload/mst/2022/05/18/33/007e403c816be53df659d9340aaa5bd9.png!75.webp" alt="">
                <span>订阅频道</span>
            </div> -->
            <router-link to="/home" tag="div" class="s-title-subscribe">
                <!-- <img src="https://h2.appsimg.com/b.appsimg.com/upload/mst/2022/05/18/33/007e403c816be53df659d9340aaa5bd9.png!75.webp" alt=""> -->
                <span>返回主频道</span>
            </router-link>
            <router-link tag="div" to="/search" class="s-title-search">
                <div class="search-btn  icon-sousuo iconfont"></div>
            </router-link>
            <router-link tag="div" to="sort" class="s-title-square">
                <img src="https://h2.appsimg.com/b.appsimg.com/upload/mst/2022/05/18/174/9fd80f0918822cd0af4ec74828817ace.png!75.webp" alt="">
                <span>频道广场</span>
            </router-link>
        </div>
        <!-- 顶部导航结束 -->
        <!-- 秒杀内容 -->
        <div class="mst-component">
            <div class="mst-component-content">
                <div class="schedule-tab">
                    <div class="schedule-tab-header">
                        <div class="tab-header-title">
                            <span>限时秒杀</span>
                            <div class="header-time">
                                <i>距结束</i>
                               <van-count-down :time="time">
                                  <template #default="timeData">
                                    <span class="block">{{ timeData.hours }}</span>
                                    <span class="colon">:</span>
                                    <span class="block">{{ timeData.minutes }}</span>
                                    <span class="colon">:</span>
                                    <span class="block">{{ timeData.seconds }}</span>
                                  </template>
                                </van-count-down>

                            </div>

                        </div>
                        <div class="tab-header-more">
                            <span>查看更多</span>
                            <i class="iconfont icon-youjiantou"></i>
                        </div>
                    </div>
                    <div class="schedule-tab-content">
                        <van-tabs>
                          <van-tab v-for="index in 8" :key="index" >
                            <template #title> 
                            <div class="tab-content-header">
                                <div class="content-header-top"><span>今日</span>{{10 + index + 1}}：00</div>
                            </div>
                            </template>
                            <div class="tab-content-item">
                                <!-- {{index}} -->
                                <div class="tab-content-lists">
                                    <img src="https://h2.appsimg.com/a.appsimg.com/upcb/2022/06/23/12/ias_46b6a7d6d4820296b97a96d9b2c33acc_224x224_85.jpg!75.webp" alt="">
                                    <div class="brand-name">INTO YOU</div>
                                    <div class="price-block-main">
                                        <span>秒杀</span>
                                        <i>￥40</i>
                                    </div>
                                    <div class="price-block-secondary">
                                        <span>限5000件</span>
                                        <i>￥40</i>
                                    </div>
                                </div>
                                 <div class="tab-content-lists">
                                    <img src="https://h2.appsimg.com/a.appsimg.com/upcb/2022/06/23/12/ias_46b6a7d6d4820296b97a96d9b2c33acc_224x224_85.jpg!75.webp" alt="">
                                    <div class="brand-name">INTO YOU</div>
                                    <div class="price-block-main">
                                        <span>秒杀</span>
                                        <i>￥40</i>
                                    </div>
                                    <div class="price-block-secondary">
                                        <span>限5000件</span>
                                        <i>￥40</i>
                                    </div>
                                </div>
                                 <div class="tab-content-lists">
                                    <img src="https://h2.appsimg.com/a.appsimg.com/upcb/2022/06/23/12/ias_46b6a7d6d4820296b97a96d9b2c33acc_224x224_85.jpg!75.webp" alt="">
                                    <div class="brand-name">INTO YOU</div>
                                    <div class="price-block-main">
                                        <span>秒杀</span>
                                        <i>￥40</i>
                                    </div>
                                    <div class="price-block-secondary">
                                        <span>限5000件</span>
                                        <i>￥40</i>
                                    </div>
                                </div>
                                 <div class="tab-content-lists">
                                    <img src="https://h2.appsimg.com/a.appsimg.com/upcb/2022/06/23/12/ias_46b6a7d6d4820296b97a96d9b2c33acc_224x224_85.jpg!75.webp" alt="">
                                    <div class="brand-name">INTO YOU</div>
                                    <div class="price-block-main">
                                        <span>秒杀</span>
                                        <i>￥40</i>
                                    </div>
                                    <div class="price-block-secondary">
                                        <span>限5000件</span>
                                        <i>￥40</i>
                                    </div>
                                </div>
                                 <div class="tab-content-lists">
                                    <img src="https://h2.appsimg.com/a.appsimg.com/upcb/2022/06/23/12/ias_46b6a7d6d4820296b97a96d9b2c33acc_224x224_85.jpg!75.webp" alt="">
                                    <div class="brand-name">INTO YOU</div>
                                    <div class="price-block-main">
                                        <span>秒杀</span>
                                        <i>￥40</i>
                                    </div>
                                    <div class="price-block-secondary">
                                        <span>限5000件</span>
                                        <i>￥40</i>
                                    </div>
                                </div>
                                 <div class="tab-content-lists">
                                    <img src="https://h2.appsimg.com/a.appsimg.com/upcb/2022/06/23/12/ias_46b6a7d6d4820296b97a96d9b2c33acc_224x224_85.jpg!75.webp" alt="">
                                    <div class="brand-name">INTO YOU</div>
                                    <div class="price-block-main">
                                        <span>秒杀</span>
                                        <i>￥40</i>
                                    </div>
                                    <div class="price-block-secondary">
                                        <span>限5000件</span>
                                        <i>￥40</i>
                                    </div>
                                </div>
                            </div>
                          </van-tab>
                        </van-tabs>
                    </div>
                </div>
            </div>
        </div>
        
         <div class="white"><img src="https://h2.appsimg.com/b.appsimg.com/upload/mst/2022/10/20/22/79a02c48d52744ba211a846bd78ebb36.jpg!75.webp" class="auto-img"></div>
        <!-- 双十一提前购 -->
        <div class="mst-component-content3">
            <div class="nav-wrapper">
                <div class="nav-wrapper-cointainer" v-show="!flag">
                    <div class="nav-wrap-item1">11.11<span>提前购</span></div>
                    <div class="nav-wrap-item">秋冬尚新</div>
                    <div class="nav-wrap-item">女装</div>
                    <div class="nav-wrap-item">鞋包</div>
                    <div class="nav-wrap-item">男装</div>
                    <div class="nav-wrap-item2" @click="flag =!flag"></div>
                </div>
                <div class="nav-wrapper-cointainer2" v-show="flag">
                    <div class="nav-wrap-header">
                        <div class="header-item1">请选择</div>
                        <div class="header-item2" @click="flag =!flag"></div>
                    </div>
                    <div class="nav-wrap-content">
                        <div class="wrap-item1">
                            <span>11.11提前购</span>
                        </div>
                        <div class="wrap-item">秋冬尚新</div>
                        <div class="wrap-item">女装</div>
                        <div class="wrap-item">鞋包</div>
                        <div class="wrap-item">男装</div>
                        <div class="wrap-item">童装</div>
                        <div class="wrap-item">内衣</div>
                        <div class="wrap-item">体用</div>
                        <div class="wrap-item">家纺</div>
                        <div class="wrap-item">精品</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 品牌推荐 -->
        <router-link to="/productDetail" tag="div" class="brand-floor">
            <div class="brand-floor-item">
                <div class="floor-item-header">
                    <div class="item-header-list1">
                        <img src="https://h2.appsimg.com/a.appsimg.com/upload/brandcool/0/144fc1ef7f1c468398e997d00c8e8407/10000608/black_200x200_85.png!75.webp" alt="">
                        <img src="https://h2.appsimg.com/a.appsimg.com/upload/brandcool/0/c86c84bba31c435f8405900618b5bd7b/10000498/black_200x200_85.png!75.webp" alt="">
                    </div>
                    <div class="item-header-list2">
                        <span>3折封顶</span>
                    </div>
                    <div class="item-header-list3">
                        <p>梦特娇，凯撒等男装疯抢专场</p>
                    </div>
                </div>
                <div class="floor-item-content">
                    <div class="item-content-list">
                        <div class="content-image">
                           <img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2021/03/10/55/6373a53a-f581-4339-b6b5-3d67c0f23ea2_228x288_85.jpg!75.webp" alt="">
                        </div>
                        <div class="content-text">
                            <span>￥86</span>
                            <div>1.4折</div>
                        </div>
                        <span class="content-text2">￥599</span>
                    </div>
                    <div class="item-content-list">
                        <div class="content-image">
                            <img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2022/10/20/107/1284d65c-31ff-4ca9-8c73-20153d009fc2_228x288_85.jpg!75.webp" alt="">
                        </div>
                        <div class="content-text">
                            <span>￥79</span>
                            <div>1.1折</div>
                        </div>
                        <span class="content-text2">￥749</span>
                    </div>
                    <div class="item-content-list">
                        <div class="content-image">
                            <img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2022/08/03/193/28c5b271-9e36-4ceb-87d8-290ef16159dd_228x288_85.jpg!75.webp" alt="">
                        </div>
                        <div class="content-text">
                            <span>￥80</span>
                            <div>1.6折</div>
                        </div>
                        <span class="content-text2">￥499</span>
                    </div>
                    <div class="item-content-list">
                        <div class="content-image">
                            <img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/634188/2022/0810/86/03da7438-b0c9-4bbd-9218-59458d808d72_228x288_85.jpg!75.webp" alt="">
                        </div>
                        <div class="content-text">
                            <span>￥296</span>
                            <div>1.9折</div>
                        </div>
                        <span class="content-text2">￥1580</span>
                    </div>
                </div>
            </div>
        </router-link>
    </div>
</template>

<script>
    export default {
        name:"lightProductView",
        data() {
            return {
                 time: 1000 * 60 * 60 * 1000,  //设置时间
                 flag:false
            };
        },
    }
</script>

<style lang="scss" scoped>

 
.lightProduct{
    .subscribe-title{
    position:fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 56px;
    width: 100%;
    z-index: 100;
    background-image: url("https://h2.appsimg.com/b.appsimg.com/upload/mst/2022/05/27/134/ba72249f4ef3f47d50a58da51a02501c.png");

    .s-title-subscribe{
        width: 67px;
        height: 26px;
        box-sizing: border-box;
        border: 1px solid #fff;
        overflow: hidden;
        border-radius: 12px;
        background-color: #fd5c7c;
        display: flex;
        align-items: center;
        margin-left: 14px;
        img{
            width: 8px;
            height: 8px;
            margin-left: 3px;
        }
        span{
            font-size: 12px;
            color: #fff;
            margin-left:2px ;
            transform: scale(0.9);
        }

    }
    .s-title-search{
        width: 218px;
        height: 30px;
        background-color: #fff;
        border-radius: 15px;
        margin-left:14px ;
        display: flex;
        align-items: center;

        .search-btn{
           height: 16px;
           width: 16px;
           margin-left: 11px;
        }
    }
    .s-title-square{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 0 0 10.5px;

        img{
            width: 25px;
        }
        span{
            margin-top: 3px;
            font-size: 12px;
            color: #fff;
            // transform: scale(0.9);
        }
    }
    }
    .mst-component{
        margin-top: 56px;
        width: 100%;
        height: 427px;
        background-color: rgb(254, 72, 153);
        padding: 0 8px 8px;
        box-sizing: border-box;
        .mst-component-content{
            width: 100%;
            height: 100%;
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            
            .schedule-tab{
            display: flex;
            flex-direction: column;
            .schedule-tab-header{
                width: 100%;
                height: 44px;
                padding: 12px 12px 8px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;

                .tab-header-title{
                    display: flex;
                    
                    span{
                        font-size: 20px;
                        font-weight: 550;
                        margin-right: 12px;
                    }
                    .header-time{
                        display: flex;
                        align-items: center;
                        height: 24px;
                        i{
                            font-size: 14px;
                            line-height: 20px;
                            margin-right: 4px;
                        }
                        .van-count-down{
                            height: 24px;
                            display: flex;
                            align-items: center;
                            .colon {
                              margin: 0 3px;
                              color: #232323;
                            }
                            .block {
                              border-radius: 2px;
                              margin: 0;
                              width: 16px;
                              color: #fff;
                              font-size: 14px;
                              font-weight: 550;
                              text-align: center;
                              background-color: #232323;
                            }

                        }

                    }
                }

                .tab-header-more{
                    line-height: 24px;
                    span{
                        font-size: 12px;
                    }
                    i{
                        font-size: 13px;
                        font-weight:bold;
                    }
                }
            }

            .schedule-tab-content{
                
                .tab-content-header{
                    width: 88px;
                    height: 40px;
                    border-radius:5px ;
                    background-color: #eeeff0;

                   
                    .content-header-top{
                        font-size: 19px;
                        line-height: 40px;
                        font-weight: bold;

                        span{
                            font-size: 13px;
                            line-height: 40px;
                        }
                    }
                }


                .tab-content-item{
                    margin-top: 10px;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-evenly;
                    width: 100%;
                    .tab-content-lists{
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        width: 119px;
                        height: 159px;
                        position: relative;
                        img{
                            width: 112px;
                        }
                        .brand-name{
                            top: 102px;
                            left: 50%;
                            transform: translateX(-50%);
                            position: absolute;
                            background: #eeeff0;
                            font-size: 14px;
                            text-align: center;
                            line-height: 17px;
                            height: 17px;
                            width: 76px;
                            border-radius: 3px;
                            color: #222;
                        }
                        .price-block-main{
                            margin-top: 10px;
                            display: flex;
                            justify-content: space-between;
                            box-sizing: border-box;
                            padding: 0 15px;
                            width: 98px;
                            height:21px;
                            border-radius: 10.5px;
                            overflow: hidden;
                            align-items: center;
                            background: #f33a62;
                            color: #fff;
                            span{
                                font-size: 12px;
                            }
                            i{
                                font-size: 14px;
                                font-weight: bold;
                            }
                        }
                        .price-block-secondary{
                            margin-top: 5px;
                            width: 98px;
                            display: flex;
                            height: 12px;
                            justify-content: space-between;
                            padding: 0 5px;
                            box-sizing: border-box;
                            color: #9898ab;
                        }
                    }
                }
               
            }
            }
        }
    }
    .mst-component-content3{

    .nav-wrapper{
        width: 100%;
        .nav-wrapper-cointainer{
            display: flex;
            justify-content: space-evenly;
            height: 55px;
            align-items: center;

            .nav-wrap-item1{
                
                width: 108px;
                height: 26px;
                font-size: 14px;
                font-weight: 550;
                color: rgb(243, 244, 245);
                background: rgb(240, 56, 103);
                text-align: center;
                line-height: 26px;
                border-radius: 5px;
                overflow: hidden;
                span{
                    font-size: 16px;
                    line-height: 26px;
                }
            }
            .nav-wrap-item{
                font-size: 14px;
            }
            .nav-wrap-item2{
                width: 12px;
                height: 12px;
                background: url("../assets/image/箭头.png") no-repeat 0 0/cover;
            }
        }

        .nav-wrapper-cointainer2{
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .nav-wrap-header{
                display: flex;
                justify-content: space-between;
                width: 100%;
                align-items: center;
                height: 55px;

                .header-item1{
                    flex: 1;
                    text-align: center;
                    font-size: 13px;
                }
                .header-item2{
                    width: 12px;
                    height: 12px;
                    margin-right:15px;
                    background: url("../assets/image/箭头2.png") no-repeat 0 0/cover;
                }
            }
        }

        .nav-wrap-content{
            display: flex;
            flex-wrap: wrap;
            align-items: center;

            .wrap-item1{
                display: flex;
                align-items: center;
                height: 55px;
                width: 93.5px;
                padding-left: 5px;
                box-sizing: border-box;
                span{
                    padding:0 8px;
                    box-sizing: border-box;
                    font-size: 16px;
                    font-weight: 550;
                    display: inline-block;
                    width: 90px;
                    height: 26px;
                    border-radius: 13px;
                    color: rgb(243, 244, 245);
                    background: rgb(240, 56, 103);
                    text-align: center;
                    line-height: 26px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
            .wrap-item{
                height: 55px;
                width: 93.5px;
                text-align: center;
                line-height: 55px;
                font-size: 13px;
                color: black;
            }
        }
    }
}
.brand-floor{
    width: 100%;
    display: flex;
    flex-direction: column;

    .brand-floor-item{
        margin: 0px 9px 12px;
        height: 280px;
        width: 357px;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        flex-direction: column;

        .floor-item-header{
            width: 357px;    
            height: 150px;
            background: url(https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/10/23/110/ias_e00ec90e0ce36196386d60fd4446b385.jpg!75.webp)no-repeat 0 0/cover;
            display: flex;
            flex-direction: column;

            .item-header-list1{
                display: flex;
                margin-left: 15px;
                margin-top:20px;

                img{
                    width: 70px;
                    height: 35px;
                    margin-right: 10px;
                }
            }
            .item-header-list2{
                margin-left: 15px;
                margin-top:25px;
                width: 68px;
                height: 20px;
                border-radius: 10px;
                background-color: #f03867;
                text-align: center;
                line-height: 20px;
                span{
                    font-size: 12px;
                }
            }
            .item-header-list3{
                margin-top:10px ;
                margin-left: 15px;
                font-size: 14px;
                font-weight: 550;
                line-height: 15px;
            }
        }

        .floor-item-content{
            margin-top: 10px;
            padding: 0 13px;
            width: 357px;
            height: 120px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;

            .item-content-list{
                display: flex;
                flex-direction: column;
                align-content: center;
                width: 76px;
                height: 114px;

                .content-image{
                    width: 76px;
                    border-radius: 5px;
                    overflow: hidden;
                    img{
                        width: 100%;
                    }
                }

                .content-text{
                    display: flex;
                    justify-content: center;
                    margin-top: 7px;
                    span{
                        font-size: 14px;
                        font-weight: 50px;
                        font-weight: 550;
                        margin-right: 10px;
                    }
                    div{
                        width: 33px;
                        height: 12px;
                        font-size: 12px;
                        color: #fff;
                        background-color: #f03867;
                        position: relative;

                        &:before{
                            content: "";
                            width: 7px;
                            height: 12px;
                            background: url("https://h2.appsimg.com/b.appsimg.com/upload/mst/2021/07/28/1/0d184032954257dc1f6fef98640fb609.png")no-repeat 0 0 /cover;
                            position: absolute;
                            top: 0;
                            left: -6px;
                        }
                    }
                }

                .content-text2{
                    text-align: center;
                    margin-top: 7px;
                    font-size: 12px;
                    display: inline-block;
                    color: #98989f;
                    text-decoration:line-through;
                }
            }
        }
    }

}
}
</style>